<template>
  <div class="home">
    <!-- 销量统计 -->
    <div class="mainInfomation">
      <div class="sales">
        <h4 v-html="sales[0].title"></h4>
        <h1 v-html="sales[0].total"></h1>
        <p>今日销售额：</p>
        <span v-html="sales[0].current"></span>
      </div>
      <div class="sales" style="background-color: #1c64a8">
        <h4 v-html="sales[1].title"></h4>
        <h1 v-html="sales[1].total"></h1>
        <p>今日销售额：</p>
        <span v-html="sales[1].current"></span>
      </div>
      <div class="sales" style="background-color: #874183">
        <h4 v-html="sales[2].title"></h4>
        <h1 v-html="sales[2].total"></h1>
        <p>今日销售额：</p>
        <span v-html="sales[2].current"></span>
      </div>
      <div class="sales" style="background-color: #1385a3">
        <h4 v-html="sales[3].title"></h4>
        <h1 v-html="sales[3].total"></h1>
        <p>今日销售额：</p>
        <span v-html="sales[3].current"></span>
      </div>
    </div>
    <!-- 折线图 -->
    <div id="line" class="line"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sales: [],
      sellTotal: {},
      date: [],
    };
  },
  mounted() {
    this.mainInfomation();
    this.sellTotalData();
  },
  methods: {
    // 获取统计数据--销售信息
    mainInfomation() {
      let _this = this;
      this.$api.getSalesInformation().then((res) => {
        // console.log(res.data.list);
        _this.sales = res.data.list;
      });
    },
    // 统计 半年 月销量对比数据 月度销售额
    sellTotalData() {
      let _this = this;
      this.$api.getSellTotal().then((res) => {
        _this.sellTotal = res.data.info;
        _this.date = res.data.info.xResult;
        console.log(_this.date);
        console.log(_this.sellTotal);
        let chartDom = document.getElementById("line");
        let myChart = _this.$echarts.init(chartDom);
        let option = {
          title: {
            text: "月销售额",
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: _this.sellTotal.date,
          },
          yAxis: {
            type: "value",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          legend: {
            data: [
              "Email",
              "Union Ads",
              "Video Ads",
            ],
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          series: [
            {
              name: _this.date[0].name,
              type: "line",
              stack: "Total",
              areaStyle: {},
              smooth: true,
              emphasis: {
                focus: "series",
              },
              data: [1220, 2132, 1101, 4134, 2090, 1230, 1210],
            },
            {
              name: _this.date[1].name,
              type: "line",
              stack: "Total",
              areaStyle: {},
              smooth: true,
              emphasis: {
                focus: "series",
              },
              data: [2220, 3182, 1191, 2234, 1290, 3330, 4310],
            },
            {
              name: _this.date[2].name,
              type: "line",
              stack: "Total",
              areaStyle: {},
              smooth: true,
              emphasis: {
                focus: "series",
              },
              data: [2150, 2232, 3201, 4154, 1190, 2330, 1410],
            },
          ],
        };
        option && myChart.setOption(option);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  margin: 10px;
  .mainInfomation {
    display: flex;
    width: 100%;
    .sales {
      position: relative;
      margin: 15px 20px;
      width: 400px;
      height: 150px;
      color: #fff;
      background-color: #ad6b55;
      border-radius: 10px;
      h4 {
        position: absolute;
        top: 15px;
        left: 20px;
      }
      h1 {
        position: absolute;
        top: 45px;
        left: 35px;
      }
      p {
        position: absolute;
        bottom: 15px;
        left: 15px;
      }
      span {
        position: absolute;
        bottom: 15px;
        left: 95px;
      }
    }
  }
  .line {
    width: 100%;
    height: 400px;
  }
}
</style>
